<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>突水水流在巷道蔓延模拟平台</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 左侧面板 - 参数配置 -->
            <div class="col-md-3 bg-light p-4">
                <h4 class="mb-3"><i class="fas fa-cogs"></i> 参数配置</h4>
                
                <!-- 巷道参数 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-road"></i> 巷道参数</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-2">
                            <label class="form-label">巷道长度 (m)</label>
                            <input type="number" class="form-control" id="L" value="1000" min="100" max="5000">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">巷道宽度 (m)</label>
                            <input type="number" class="form-control" id="B" value="5" min="1" max="20" step="0.1">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">曼宁系数</label>
                            <input type="number" class="form-control" id="n" value="0.04" min="0.01" max="0.1" step="0.001">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">底坡</label>
                            <input type="number" class="form-control" id="S0" value="0.002" min="0.0001" max="0.01" step="0.0001">
                        </div>
                    </div>
                </div>
                
                <!-- 突水参数 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-tint"></i> 突水参数</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-2">
                            <label class="form-label">突水点位置 (m)</label>
                            <input type="number" class="form-control" id="x_inject" value="300" min="0" max="1000">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">峰值流量 (m³/s)</label>
                            <input type="number" class="form-control" id="Q_inject" value="15" min="1" max="100">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">达到峰值时间 (s)</label>
                            <input type="number" class="form-control" id="t_peak" value